<template>
    <div v-if="userInfo">
        <el-card class="box-card" style="width: 400px">
            <div slot="header" class="clearfix">
                <span>{{userInfo.username}}</span>
            </div>
            <div>
                <div style="display: flex;justify-content: center">
                    <el-upload
                            :show-file-list="false"
                            :on-success="onSuccess"
                            :data="userInfo"
                            action="/system/user/avatar">
                        <img title="点击修改用户图像" :src="userInfo.avatar" style="width: 100px;height: 100px;border-radius: 50px"
                             alt="">
                    </el-upload>
                </div>
                <div>电话号码：
                    <el-tag>{{userInfo.telephone}}</el-tag>
                </div>
                <div>手机号码：
                    <el-tag>{{userInfo.phone}}</el-tag>
                </div>
                <div>居住地址：
                    <el-tag>{{userInfo.address}}</el-tag>
                </div>
                <div style="display: flex;justify-content: space-around;margin-top: 10px">
                    <el-button type="primary" @click="showUpdateHrInfoView">修改信息</el-button>
                    <el-button type="danger" @click="showUpdatePasswordView">修改密码</el-button>
                </div>
            </div>
        </el-card>
<!--        <el-dialog-->
<!--                title="修改用户信息"-->
<!--                :visible.sync="dialogVisible"-->
<!--                width="30%">-->
<!--            <div>-->
<!--                <table>-->
<!--                    <tr>-->
<!--                        <td>-->
<!--                            <el-tag>用户昵称：</el-tag>-->
<!--                        </td>-->
<!--                        <td>-->
<!--                            <el-input v-model="hr2.name"></el-input>-->
<!--                        </td>-->
<!--                    </tr>-->
<!--                    <tr>-->
<!--                        <td>-->
<!--                            <el-tag>电话号码：</el-tag>-->
<!--                        </td>-->
<!--                        <td>-->
<!--                            <el-input v-model="hr2.telephone"></el-input>-->
<!--                        </td>-->
<!--                    </tr>-->
<!--                    <tr>-->
<!--                        <td>-->
<!--                            <el-tag>手机号码：</el-tag>-->
<!--                        </td>-->
<!--                        <td>-->
<!--                            <el-input v-model="hr2.phone"></el-input>-->
<!--                        </td>-->
<!--                    </tr>-->
<!--                    <tr>-->
<!--                        <td>-->
<!--                            <el-tag>用户地址：</el-tag>-->
<!--                        </td>-->
<!--                        <td>-->
<!--                            <el-input v-model="hr2.address"></el-input>-->
<!--                        </td>-->
<!--                    </tr>-->
<!--                </table>-->
<!--            </div>-->
<!--            <span slot="footer" class="dialog-footer">-->
<!--    <el-button @click="dialogVisible = false">取 消</el-button>-->
<!--    <el-button type="primary" @click="updateHrInfo">确 定</el-button>-->
<!--  </span>-->
<!--        </el-dialog>-->
<!--        <el-dialog-->
<!--                title="修改密码"-->
<!--                :visible.sync="passwdDialogVisible"-->
<!--                width="30%">-->
<!--            <div>-->
<!--                <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px"-->
<!--                         class="demo-ruleForm">-->
<!--                    <el-form-item label="请输入旧密码" prop="oldpass">-->
<!--                        <el-input type="password" v-model="ruleForm.oldpass" autocomplete="off"></el-input>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="请输入新密码" prop="pass">-->
<!--                        <el-input type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item label="新确认密码" prop="checkPass">-->
<!--                        <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>-->
<!--                    </el-form-item>-->
<!--                    <el-form-item>-->
<!--                        <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>-->
<!--                        <el-button @click="resetForm('ruleForm')">重置</el-button>-->
<!--                    </el-form-item>-->
<!--                </el-form>-->
<!--            </div>-->
<!--        </el-dialog>-->
    </div>
</template>

<script>
export default {
  name: 'PersonInfo',
  data () {
    // let validatePass = (rule, value, callback) => {
    //   if (value === '') {
    //     callback(new Error('请输入密码'))
    //   } else {
    //     if (this.ruleForm.checkPass !== '') {
    //       this.$refs.ruleForm.validateField('checkPass')
    //     }
    //     callback()
    //   }
    // }
    // let validatePass2 = (rule, value, callback) => {
    //   if (value === '') {
    //     callback(new Error('请再次输入密码'))
    //   } else if (value !== this.ruleForm.pass) {
    //     callback(new Error('两次输入密码不一致!'))
    //   } else {
    //     callback()
    //   }
    // }
    return {
      ruleForm: {
        oldPassword: '',
        password: '',
        checkPassword: ''
      },
      // rules: {
      //   oldPassword: [
      //     {validator: validatePass, trigger: 'blur'}
      //   ],
      //   password: [
      //     {validator: validatePass, trigger: 'blur'}
      //   ],
      //   checkPassword: [
      //     {validator: validatePass2, trigger: 'blur'}
      //   ]
      // },
      userInfo: null,
      dialogVisible: false,
      passwordDialogVisible: false
    }
  },
  mounted () {
    this.initHr()
  },
  methods: {
    onSuccess () {
      this.initHr()
    },
    updateHrInfo () {
      this.putRequest('/system/user/personInfo', this.hr2).then(resp => {
        if (resp) {
          this.dialogVisible = false
          this.initHr()
        }
      })
    },
    showUpdateHrInfoView () {
      this.dialogVisible = true
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.ruleForm.hrid = this.hr.id
          this.putRequest('/hr/pass', this.ruleForm).then(resp => {
            if (resp) {
              this.getRequest('/logout')
              window.sessionStorage.removeItem('user')
              this.$store.commit('initRoutes', [])
              this.$router.replace('/')
            }
          })
        } else {
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    showUpdatePasswordView () {
      this.passwordDialogVisible = true
    },
    initHr () {
      // this.getRequest('/system/user/personInfo').then(resp => {
      //   if (resp && resp.data) {
      //     this.userInfo = resp.data
      //   }
      // })
    }
  }
}
</script>

<style scoped>

</style>
